<template>
  <div class="region-safety-page" :style="pageBackgroundStyle">
    <!-- 顶部区域信息 -->
    <div class="region-header">
      <div class="back-button" @click="goBack">
        <el-icon><ArrowLeft /></el-icon>
        返回
      </div>
      <div class="region-name">{{ regionInfo.regionName || regionInfo.name || '未知区域' }}</div>
    </div>

    <!-- 操作按钮区域 -->
    <div class="action-buttons-section" v-if="hasDetectionPermission">
      <div class="action-buttons-container">
        <button class="glass-button glass-button-success" @click="handleCompleteInspection">
          <span class="button-text">已完成巡检</span>
        </button>
        <button class="glass-button glass-button-primary" @click="handleAddMaintenance">
          <span class="button-text">新增维修信息</span>
        </button>
      </div>
    </div>

    <!-- 信息卡片区域 -->
    <div class="info-card-section">
      <div class="info-card-list">
        <el-skeleton v-if="infoLoading" rows="3" animated style="margin: 32px 0" />
        <template v-else>
          <div v-if="infoList.length === 0" class="info-empty">
            <el-icon><Document /></el-icon>
            <div class="empty-text">暂无维修信息</div>
            <div class="empty-desc">点击区域板块添加新信息</div>
          </div>
          <div v-else class="info-card-grid">
            <div class="info-card" v-for="info in sortedInfoList" :key="info.id" @click="handleInfoCardClick(info)">
              <!-- <div class="info-card-id-badge" :class="'badge-status-' + info.status">{{ info.id }}</div> -->
              <div class="info-card-img" v-if="info.picture">
                <img :src="info.picture" alt="info" />
                <div class="info-card-status-overlay" :style="{ color: infoStatusMap[info.status]?.color, background: infoStatusMap[info.status]?.bg }">
                  {{ infoStatusMap[info.status]?.text || '未知' }}
                </div>
              </div>
              <div class="info-card-img info-card-img-placeholder" v-else>
                <el-icon><Camera /></el-icon>
              </div>
              <div class="info-card-meta"></div>
            </div>
          </div>
        </template>
      </div>
      <el-pagination
        v-if="infoTotal > infoPageSize"
        :current-page="infoPage"
        :page-size="infoPageSize"
        :total="infoTotal"
        layout="prev, pager, next"
        @current-change="handleInfoPageChange"
        class="info-pagination"
      />
      </div>
      
    <!-- 详情弹窗 -->
    <el-dialog v-model="detailDialogVisible" width="430px" :close-on-click-modal="true" class="info-detail-dialog" :show-close="true" @close="resetDetailDialog" :footer="null">
      <template #title>
        <div class="info-detail-title">{{ isAddMode ? '新增信息' : '详情' }}</div>
      </template>
      <el-skeleton v-if="detailLoading" rows="6" animated style="margin: 32px 0" />
      <div v-if="detailData" class="info-detail-content">
        <div class="info-detail-main-img-wrap">
          <div class="info-detail-main-img-interactive">
            <!-- 主图未被删除且未上传新图 -->
            <el-image
              v-if="!isPictureDeleted && !newPictureUrl"
              :src="detailData.picture"
              fit="cover"
              :preview-src-list="[detailData.picture]"
              :initial-index="0"
              class="info-detail-main-img-el"
              @mousedown="handlePictureMouseDown"
              @mouseup="handlePictureMouseUp"
              @mouseleave="handlePictureMouseLeave"
              @touchstart="handlePictureMouseDown"
              @touchend="handlePictureMouseUp"
              :style="{ width: '220px', height: '120px' }"
              v-bind="{ style: isLongPressing ? 'opacity:0.5;filter:blur(1px);' : '' }"
            />
            <!-- 删除图标 -->
            <el-icon v-if="showDeleteIcon && !isPictureDeleted && !newPictureUrl" class="info-detail-main-img-delete" @click.stop="handleDeletePicture"><Delete /></el-icon>
            <!-- 新图预览 -->
            <el-image
              v-if="newPictureUrl"
              :src="newPictureUrl"
              fit="cover"
              class="info-detail-main-img-el"
              :preview-src-list="[newPictureUrl]"
              :initial-index="0"
              :style="{ width: '220px', height: '120px' }"
            />
            <!-- 上传按钮 -->
            <el-upload
              v-if="isPictureDeleted || !detailData.picture"
              class="info-detail-main-img-upload"
              v-model:file-list="uploadFileList"
              :action="uploadUrl"
              :headers="uploadHeaders"
              :show-file-list="false"
              :on-success="handleUploadSuccess"
              :before-upload="handleBeforeUpload"
              accept="image/*"
            >
              <div class="info-detail-main-img-plus">
                <el-icon><Plus /></el-icon>
                <span>上传图片</span>
              </div>
            </el-upload>
          </div>
          <span class="info-detail-status-badge-float" :class="'badge-status-' + detailData.status">
            {{ infoStatusMap[detailData.status]?.text || '未知' }}
          </span>
        </div>
        <div class="info-detail-section">
          <div class="info-detail-remarks-content">
            <el-input
              v-if="hasDetectionPermission && !isReadonly"
              v-model="detailData.remarks"
              type="textarea"
              :rows="3"
              placeholder="请输入备注信息"
              maxlength="500"
              show-word-limit
              class="info-detail-remarks-input"
            />
            <div v-else class="info-detail-remarks-text">
              {{ detailData.remarks || '暂无备注' }}
            </div>
          </div>
        </div>
        <div class="info-detail-section" @click="openDetectionEdit" :style="{ cursor: hasDetectionPermission ? 'pointer' : 'default' }">
          <div class="info-detail-section-title">检测信息</div>
          <div class="info-detail-row">
            <span class="info-detail-label">检测人员</span>
            <span class="info-detail-value">{{ detailDetectionUser?.nickName || '-' }}</span>
            <span class="info-detail-label">员工编号</span>
            <span class="info-detail-value">{{ detailData.detectionBy || '-' }}</span>
          </div>
          <div class="info-detail-row">
            <span class="info-detail-label">检测时间</span>
            <span class="info-detail-value">{{ detailData.detectionTime ? (detailData.detectionTime.split('T')[0] + ' ' + (detailData.detectionTime.split('T')[1]||'').split('+')[0]) : '-' }}</span>
          </div>
          <div class="info-detail-album-row">
            <span class="info-detail-label">检测相册</span>
            <div class="info-detail-album-list" style="position:relative;display:flex;align-items:center;">
              <el-image
                v-for="(img, idx) in (inspecAlbumExpanded ? (detailData.cInspecAlbumList || []) : (detailData.cInspecAlbumList || []).slice(0,3))"
                :key="idx"
                :src="img.url || img.picture || ''"
                fit="cover"
                class="info-detail-album-img"
                :preview-src-list="(detailData.cInspecAlbumList||[]).map(i=>i.url||i.picture||'')"
                :initial-index="idx"
                @click.stop
              />
              <span v-if="!(detailData.cInspecAlbumList && detailData.cInspecAlbumList.length)">无</span>
              <el-icon
                v-if="detailData.cInspecAlbumList && detailData.cInspecAlbumList.length > 3"
                class="album-expand-arrow"
                :class="{expanded: inspecAlbumExpanded}"
                style="margin-left:8px;cursor:pointer;"
                @click.stop="inspecAlbumExpanded = !inspecAlbumExpanded"
              >
                <svg width="38" height="38" viewBox="0 0 38 38">
                  <defs>
                    <linearGradient id="arrowBlue" x1="0" y1="0" x2="1" y2="1">
                      <stop offset="0%" stop-color="#60a5fa"/>
                      <stop offset="100%" stop-color="#1e3a8a"/>
                    </linearGradient>
                  </defs>
                  <circle cx="19" cy="19" r="18" fill="#eaf3fd" fill-opacity="0.85"/>
                  <circle cx="19" cy="19" r="18" fill="url(#arrowBlue)" fill-opacity="0.12"/>
                  <path d="M13 17l6 6 6-6" stroke="url(#arrowBlue)" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                </svg>
              </el-icon>
            </div>
          </div>
        </div>
        <div class="info-detail-section" @click="openMaintenanceEdit" :style="{ cursor: hasMaintenancePermission ? 'pointer' : 'default' }">
          <div class="info-detail-section-title">维修信息</div>
          <div class="info-detail-row">
            <span class="info-detail-label">维修人员</span>
            <span class="info-detail-value">{{ detailMaintenanceUser?.nickName || '-' }}</span>
            <span class="info-detail-label">员工编号</span>
            <span class="info-detail-value">{{ detailData.maintenanceBy || '-' }}</span>
          </div>
          <div class="info-detail-row">
            <span class="info-detail-label">维修时间</span>
            <span class="info-detail-value">{{ detailData.maintenanceTime ? (detailData.maintenanceTime.split('T')[0] + ' ' + (detailData.maintenanceTime.split('T')[1]||'').split('+')[0]) : '-' }}</span>
          </div>
          <div class="info-detail-album-row">
            <span class="info-detail-label">维修相册</span>
            <div class="info-detail-album-list" style="position:relative;display:flex;align-items:center;">
              <el-image
                v-for="(img, idx) in (maintainAlbumExpanded ? (detailData.cMaintainAlbumList || []) : (detailData.cMaintainAlbumList || []).slice(0,3))"
                :key="idx"
                :src="img.url || img.picture || ''"
                fit="cover"
                class="info-detail-album-img"
                :preview-src-list="(detailData.cMaintainAlbumList||[]).map(i=>i.url||i.picture||'')"
                :initial-index="idx"
                @click.stop
              />
              <span v-if="!(detailData.cMaintainAlbumList && detailData.cMaintainAlbumList.length)">无</span>
              <el-icon
                v-if="detailData.cMaintainAlbumList && detailData.cMaintainAlbumList.length > 3"
                class="album-expand-arrow"
                :class="{expanded: maintainAlbumExpanded}"
                style="margin-left:8px;cursor:pointer;"
                @click.stop="maintainAlbumExpanded = !maintainAlbumExpanded"
              >
                <svg width="38" height="38" viewBox="0 0 38 38">
                  <defs>
                    <linearGradient id="arrowBlue2" x1="0" y1="0" x2="1" y2="1">
                      <stop offset="0%" stop-color="#60a5fa"/>
                      <stop offset="100%" stop-color="#1e3a8a"/>
                    </linearGradient>
                  </defs>
                  <circle cx="19" cy="19" r="18" fill="#eaf3fd" fill-opacity="0.85"/>
                  <circle cx="19" cy="19" r="18" fill="url(#arrowBlue2)" fill-opacity="0.12"/>
                  <path d="M13 17l6 6 6-6" stroke="url(#arrowBlue2)" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                </svg>
              </el-icon>
            </div>
          </div>
        </div>
        <!-- 维修人员对待维修任务显示接取按钮 -->
        <button 
          v-if="hasMaintenancePermission && detailData.status === 0" 
          class="glass-button glass-button-success" 
          @click="handleAcceptTask"
        >
          <span class="button-text">接取</span>
        </button>
        <!-- 其他情况显示确定按钮 -->
        <button 
          v-else
          class="glass-button glass-button-primary" 
          @click="handleDetailConfirm" 
          :disabled="isReadonly"
        >
          <span class="button-text">确定</span>
        </button>
      </div>
      <div v-else class="info-detail-empty">暂无详细信息</div>
      
    </el-dialog>

    <!-- 编辑弹窗 -->
    <el-dialog v-model="editDialogVisible" title="编辑信息" width="480px" :close-on-click-modal="false">
      <el-form :model="editForm" label-width="90px">
        <el-form-item label="检测人员">
          <el-input v-model="editForm.detectionUser" />
        </el-form-item>
        <el-form-item label="员工编号">
          <el-input v-model="editForm.detectionBy" />
        </el-form-item>
        <el-form-item label="维修人员">
          <el-input v-model="editForm.maintenanceUser" />
        </el-form-item>
        <el-form-item label="维修编号">
          <el-input v-model="editForm.maintenanceBy" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="editForm.status">
            <el-option v-for="(v, k) in infoStatusMap" :key="k" :label="v.text" :value="Number(k)" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <button class="glass-button glass-button-secondary" @click="editDialogVisible = false">
          <span class="button-text">取消</span>
        </button>
        <button class="glass-button glass-button-primary" @click="handleEditConfirm">
          <span class="button-text">确定</span>
        </button>
      </template>
    </el-dialog>

    <!-- 检测信息编辑弹窗 -->
    <el-dialog v-model="detectionEditVisible" width="90%" :close-on-click-modal="false" class="edit-dialog">
      <template #title>
        <div style="text-align:center;width:100%;font-size:1.2rem;font-weight:bold;">修改检测相册</div>
      </template>
      <el-form :model="detectionEditForm" label-width="90px">
        <el-form-item label="检测相册">
          <el-upload
            class="album-uploader"
            :action="uploadUrl"
            :headers="uploadHeaders"
            :file-list="detectionEditForm.inspecpictures?.map((url,idx)=>({name:`图片${idx+1}`,url})) || []"
            :on-success="(res, file) => handleAlbumUploadSuccess(res, file, 'detection')"
            :on-remove="(file, fileList) => handleAlbumRemove(file, fileList, 'detection')"
            list-type="picture-card"
            multiple
            accept="image/*"
            :show-file-list="true"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <button class="glass-button glass-button-secondary" @click="detectionEditVisible = false">
          <span class="button-text">取消</span>
        </button>
        <button class="glass-button glass-button-primary" @click="handleDetectionEditConfirm">
          <span class="button-text">确定</span>
        </button>
      </template>
    </el-dialog>

    <!-- 维修信息编辑弹窗 -->
    <el-dialog v-model="maintenanceEditVisible" width="90%" :close-on-click-modal="false" class="edit-dialog">
      <template #title>
        <div style="text-align:center;width:100%;font-size:1.2rem;font-weight:bold;">修改维修相册</div>
      </template>
      <el-form :model="maintenanceEditForm" label-width="90px">
        <el-form-item label="维修相册">
          <el-upload
            class="album-uploader"
            :action="uploadUrl"
            :headers="uploadHeaders"
            :file-list="maintenanceEditForm.maintainpictures?.map((url,idx)=>({name:`图片${idx+1}`,url})) || []"
            :on-success="(res, file) => handleAlbumUploadSuccess(res, file, 'maintenance')"
            :on-remove="(file, fileList) => handleAlbumRemove(file, fileList, 'maintenance')"
            list-type="picture-card"
            multiple
            accept="image/*"
            :show-file-list="true"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <button class="glass-button glass-button-secondary" @click="maintenanceEditVisible = false">
          <span class="button-text">取消</span>
        </button>
        <button class="glass-button glass-button-primary" @click="handleMaintenanceEditConfirm">
          <span class="button-text">确定</span>
        </button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Plus, 
  Document, 
  Warning, 
  CircleCheck, 
  Tools,
  Location,
  ArrowLeft,
  Camera,
  Delete
} from '@element-plus/icons-vue'
// 夜间模式已禁用
import { getRegion } from '@/api/region/region'
import { updateRegion } from '@/api/region/region'
import { listRegion_picture } from '@/api/region/region_picture'
import { listInformation, getInformation, upload as uploadInformationPicture, updateInformation, addInformation } from '@/api/information/information'
import { getUser } from '@/api/system/user'
import { getUserInfo } from '@/utils/auth'
import { getUserProfile, getAuthRole } from '@/api/system/user'

const route = useRoute()
const router = useRouter()

// 区域信息
const regionInfo = reactive({
  id: null,
  regionName: '',
  name: '',
  status: 0,
  regionDesc: '',
  description: ''
})

// 信息卡片状态映射
const infoStatusMap = {
  0: { text: '待维修', color: '#ff4d4f', bg: 'rgba(255,77,79,0.08)' },
  1: { text: '已维修', color: '#52c41a', bg: 'rgba(82,196,26,0.08)' },
  2: { text: '待审核', color: '#faad14', bg: 'rgba(250,173,20,0.08)' },
  3: { text: '不通过', color: '#8c8c8c', bg: 'rgba(140,140,140,0.08)' },
  4: { text: '已接取', color: '#1890ff', bg: 'rgba(24,144,255,0.08)' }
}

// 分页信息
const infoList = ref([])
const infoTotal = ref(0)
const infoPage = ref(1)
const infoPageSize = ref(12)
const infoLoading = ref(false)

// 排序优先级映射
const infoStatusOrder = computed(() => {
  if (hasMaintenancePermission.value) {
    // 维修人员的排序：已接取(4) > 待维修(0) > 不通过(3) > 待审核(2)
    return { 4: 1, 0: 2, 3: 3, 2: 4, 1: 5 }
  } else {
    // 其他用户的排序：待维修(0) > 不通过(3) > 待审核(2) > 已维修(1)
    return { 0: 1, 3: 2, 2: 3, 1: 4, 4: 5 }
  }
})

// 排序后的信息列表
const sortedInfoList = computed(() => {
  return [...infoList.value].sort((a, b) => {
    const orderA = infoStatusOrder.value[a.status] || 99
    const orderB = infoStatusOrder.value[b.status] || 99
    
    // 如果优先级相同，按创建时间倒序排列（最新的在前）
    if (orderA === orderB) {
      const timeA = new Date(a.createTime || 0)
      const timeB = new Date(b.createTime || 0)
      return timeB - timeA
    }
    
    return orderA - orderB
  })
})

// 区域状态色彩方案
const statusColorMap = {
  0: {
    main: '#4ade80', // 安全-绿色
    gradient: 'linear-gradient(90deg, #4ade80 0%, #22d3ee 100%)',
    shadow: '0 0 0 6px rgba(74,222,128,0.10)'
  },
  1: {
    main: '#ffe066', // 未检查-明亮柠檬黄
    gradient: 'linear-gradient(90deg, #ffe066 0%, #ffd700 100%)',
    shadow: '0 0 0 6px rgba(255,224,102,0.18)'
  },
  2: {
    main: '#ff4d4f', // 待维修-鲜明红色
    gradient: 'linear-gradient(90deg, #ff4d4f 0%, #ff7875 100%)',
    shadow: '0 0 0 6px rgba(255,77,79,0.18)'
  },
  default: {
    main: '#60a5fa', // 默认蓝色
    gradient: 'linear-gradient(90deg, #60a5fa 0%, #818cf8 100%)',
    shadow: '0 0 0 6px rgba(96,165,250,0.10)'
  }
}

const regionStatus = computed(() => getRegionStatus(regionInfo))
const regionColor = computed(() => statusColorMap[regionStatus.value] || statusColorMap.default)

// 获取区域图片
const getRegionPicture = async (regionId) => {
  try {
    const response = await listRegion_picture({ regionId: regionId });
    if (response.code === 200 && response.rows && response.rows.length > 0) {
      return response.rows[0].picture || response.rows[0].url;
    }
  } catch (error) {
    console.error(`获取区域${regionId}图片失败:`, error);
  }
  return null;
};

// 递归获取父区域图片
const getRegionPictureWithFallback = async (region) => {
  // 先尝试获取当前区域的图片
  let picture = await getRegionPicture(region.id);
  if (picture) return picture;
  
  // 如果没有图片且有父区域，则获取父区域图片
  if (region.parentId && region.parentId !== 0) {
    try {
      const parentResponse = await getRegion(region.parentId);
      if (parentResponse.code === 200 && parentResponse.data) {
        return await getRegionPictureWithFallback(parentResponse.data);
      }
    } catch (error) {
      console.error(`获取父区域${region.parentId}信息失败:`, error);
    }
  }
  
  return null;
};

// 页面背景样式（玻璃拟态）
const pageBackgroundStyle = computed(() => {
  // 使用层级查找的图片
  const backgroundImage = regionInfo.picture
  if (backgroundImage) {
    return {
      backgroundImage: `url(${backgroundImage})`,
      backgroundSize: 'cover',
      backgroundPosition: 'center',
      backgroundRepeat: 'no-repeat'
    }
  }
  // 默认灰色背景
  return {
    background: '#f5f5f7'
  }
})

// 获取区域状态值（尝试多种可能的字段名）
const getRegionStatus = (region) => {
  // 尝试多种可能的状态字段名
  const possibleStatusFields = ['status', 'regionStatus', 'safetyStatus', 'state', 'regionState', 'safetyState'];
  
  for (const field of possibleStatusFields) {
    if (region[field] !== undefined) {
      return region[field];
    }
  }
  
  return 0;
}

// 加载区域信息
const loadRegionInfo = async (regionId) => {
  if (!regionId) {
    ElMessage.error('区域ID不能为空')
    router.push('/')
    return
  }
  try {
    const response = await getRegion(regionId)
    if (response.code === 200 && response.data) {
      const regionData = {
        ...response.data,
        status: response.data.regionStatus !== undefined ? response.data.regionStatus : 0
      };
      
      // 获取区域图片（包括父区域回退）
      regionData.picture = await getRegionPictureWithFallback(regionData);
      
      Object.assign(regionInfo, regionData)
      // 区域信息加载后加载信息卡片
      loadInfoList()
    } else {
      ElMessage.error('获取区域信息失败')
      router.push('/')
    }
  } catch (error) {
    console.error('获取区域信息失败:', error)
    ElMessage.error('获取区域信息失败')
    router.push('/')
  }
}

// 加载信息卡片
const loadInfoList = async () => {
  if (!regionInfo.id) return
  infoLoading.value = true
  try {
    // 获取所有记录，不进行分页限制
    const res = await listInformation({ regionId: regionInfo.id, pageNum: 1, pageSize: 9999 })
    if (res.code === 200 && res.rows) {
      
      let filteredRows = res.rows
      
      // 根据用户权限过滤显示的信息
      if (hasMaintenancePermission.value) {
        // 维修人员可以看到：待维修(0)、不通过(3)、待审核(2)、已接取(4)的任务
        // 但只显示自己接取的已接取任务，或者未被接取的任务
        filteredRows = res.rows.filter(item => {
          // 状态为已维修(1)的不显示
          if (item.status === 1) return false
          
          // 状态为已接取(4)的，只显示当前用户接取的任务
          if (item.status === 4) {
            return item.maintenanceBy === currentUser.userId
          }
          
          // 其他状态(0待维修、2待审核、3不通过)都显示
          return true
        })
      } else if (hasDetectionPermission.value) {
        // 检测人员只看到非已维修状态的信息
        filteredRows = res.rows.filter(item => item.status !== 1)
      } else {
        // 其他用户过滤掉已维修的信息
        filteredRows = res.rows.filter(item => item.status !== 1)
      }
      
      // 存储所有过滤后的数据
      const allFilteredData = filteredRows
      
      // 计算分页
      const startIndex = (infoPage.value - 1) * infoPageSize.value
      const endIndex = startIndex + infoPageSize.value
      const paginatedData = allFilteredData.slice(startIndex, endIndex)
      
      infoList.value = paginatedData
      infoTotal.value = allFilteredData.length
    } else {
      infoList.value = []
      infoTotal.value = 0
    }
  } catch (e) {
    infoList.value = []
    infoTotal.value = 0
  } finally {
    infoLoading.value = false
  }
}

// 分页切换
const handleInfoPageChange = (page) => {
  infoPage.value = page
  loadInfoList()
}

const goBack = () => {
  router.push('/')
}

// 添加维修信息按钮处理
const handleAddMaintenance = () => {
  // 创建新的维修信息
  isAddMode.value = true
  detailData.value = {
    id: null,
    regionId: regionInfo.id,
    picture: '',
    remarks: '',
    status: 0, // 待维修状态
    detectionBy: null,
    detectionTime: null,
    maintenanceBy: currentUser.userId,
    maintenanceTime: null,
    cInspecAlbumList: [],
    cMaintainAlbumList: [],
    inspecpictures: [],
    maintainpictures: []
  }
  detailDetectionUser.value = null
  detailMaintenanceUser.value = currentUser
  isPictureDeleted.value = false
  showDeleteIcon.value = false
  newPictureUrl.value = ''
  uploadFileList.value = []
  detailDialogVisible.value = true
}

// 已完成巡检按钮处理
const handleCompleteInspection = async () => {
  try {
    // 更新区域状态为已检查（安全状态）
    const updateData = {
      id: regionInfo.id,
      regionStatus: 0 // 设置为安全状态
    }
    
    const response = await updateRegion(updateData)
    if (response.code === 200) {
      ElMessage.success('巡检完成，区域状态已更新')
      // 更新本地区域信息
      regionInfo.status = 0
      // 重新加载信息列表
      await loadInfoList()
    } else {
      ElMessage.error(response.msg || '更新区域状态失败')
    }
  } catch (error) {
    console.error('完成巡检失败:', error)
    ElMessage.error('完成巡检失败')
  }
}

// 详情弹窗相关
const detailDialogVisible = ref(false)
const detailLoading = ref(false)
const detailData = ref(null)
const detailDetectionUser = ref(null)
const detailMaintenanceUser = ref(null)
const originalDetailData = ref(null)
const isAddMode = ref(false)

// 主图交互相关
const isLongPressing = ref(false)
const showDeleteIcon = ref(false)
const isPictureDeleted = ref(false)
const uploadFileList = ref([])
const uploadUrl = 'http://localhost:8080/common/upload' // 新的后端接口路径
const uploadHeaders = {
  Authorization: localStorage.getItem('token')
}
const newPictureUrl = ref('')
const handleUploadSuccess = (response, file, fileList) => {
  if (response.code === 200 && (response.url || response.data?.url)) {
    newPictureUrl.value = response.url || response.data.url;
    isPictureDeleted.value = false;
    // 新增：主图赋值
    if (detailData.value) {
      detailData.value.picture = newPictureUrl.value;
    }
    ElMessage.success('图片上传成功');
  } else {
    ElMessage.error(response.msg || '图片上传失败');
  }
}
const handleBeforeUpload = (file) => {
  // 可选：校验图片类型/大小
  return true
}

// 长按主图
const handlePictureMouseDown = () => {
  longPressTimer = setTimeout(() => {
    isLongPressing.value = true
    showDeleteIcon.value = true
  }, 600)
}
const handlePictureMouseUp = () => {
  clearTimeout(longPressTimer)
}
const handlePictureMouseLeave = () => {
  clearTimeout(longPressTimer)
}
const handleDeletePicture = async () => {
  showDeleteIcon.value = false
  isLongPressing.value = false
  try {
    await ElMessageBox.confirm('是否要删除当前展示图片？', '提示', { type: 'warning' })
    isPictureDeleted.value = true
    uploadFileList.value = []
    newPictureUrl.value = ''
  } catch (e) {
    // 用户取消，不做任何处理
  }
}

// 确认修改图片
const handleConfirmPicture = async () => {
  if (!newPictureUrl.value) return
  try {
    const res = await updateInformation({ id: detailData.value.id, picture: newPictureUrl.value })
    if (res.code === 200) {
      detailData.value.picture = newPictureUrl.value
      isPictureDeleted.value = false
      newPictureUrl.value = ''
      ElMessage.success('图片修改成功')
      detailDialogVisible.value = false
      // 自动刷新主列表
      await loadInfoList()
    } else {
      ElMessage.error(res.msg || '图片修改失败')
    }
  } catch (e) {
    ElMessage.error('图片修改失败')
  }
}

// 查询详情
const handleInfoCardClick = async (info) => {
  // 重置主图相关状态
  isPictureDeleted.value = false;
  showDeleteIcon.value = false;
  newPictureUrl.value = '';
  uploadFileList.value = [];
  isAddMode.value = false;
  detailDialogVisible.value = true;
  detailLoading.value = true;
  detailData.value = null;
  detailDetectionUser.value = null;
  detailMaintenanceUser.value = null;
  try {
    const res = await getInformation(info.id);
    if (res.code === 200 && res.data) {
      detailData.value = res.data;
      originalDetailData.value = JSON.parse(JSON.stringify(res.data));
      // 查询检测人员
      if (res.data.detectionBy) {
        try {
          const userRes = await getUser(res.data.detectionBy)
          if (userRes.code === 200 && userRes.data) detailDetectionUser.value = userRes.data
        } catch {}
      }
      // 查询维修人员
      if (res.data.maintenanceBy) {
        try {
          const userRes = await getUser(res.data.maintenanceBy)
          if (userRes.code === 200 && userRes.data) detailMaintenanceUser.value = userRes.data
        } catch {}
      }
    }
  } finally {
    detailLoading.value = false;
  }
}

let longPressTimer = null

const editDialogVisible = ref(false)
const editForm = ref({})

function openEditDialog() {
  editForm.value = { ...detailData.value }
  editDialogVisible.value = true
}
function handleEditConfirm() {
  // 自动设置检测时间为当前时间
  editForm.value.detectionTime = new Date().toISOString().replace('T', ' ').substring(0, 19)
  Object.assign(detailData.value, editForm.value)
  editDialogVisible.value = false
}

// 接取任务函数
async function handleAcceptTask() {
  if (!detailData.value || !hasMaintenancePermission.value) {
    ElMessage.error('您没有权限接取此任务');
    return;
  }
  
  if (detailData.value.status !== 0) {
    ElMessage.error('只能接取待维修状态的任务');
    return;
  }
  
  try {
    // 更新任务状态为已接取，并设置维修人员ID
    const payload = {
      id: detailData.value.id,
      status: 4, // 已接取状态
      maintenanceBy: currentUser.userId, // 设置维修人员ID
      // 不设置维修时间，等待实际维修完成时再设置
    };
    
    const res = await updateInformation(payload);
    if (res.code === 200) {
      ElMessage.success('任务接取成功');
      // 更新本地数据
      detailData.value.status = 4;
      detailData.value.maintenanceBy = currentUser.userId;
      // 刷新列表
      await loadInfoList();
      // 关闭弹窗
      detailDialogVisible.value = false;
    } else {
      ElMessage.error(res.msg || '接取任务失败');
    }
  } catch (error) {
    console.error('接取任务失败:', error);
    ElMessage.error('接取任务失败');
  }
}

async function handleDetailConfirm() {
  // 主图必填校验
  if (!detailData.value.picture) {
    ElMessage.error('请上传主图');
    return;
  }
  // 新增：相册必填校验
  if (hasDetectionPermission.value) {
    // 巡检人员必须上传检测相册
    const inspecAlbum = detailData.value.cInspecAlbumList || [];
    if (!inspecAlbum.length) {
      ElMessage.error('检测相册为必填项，请上传检测相册');
      return;
    }
  }
  if (hasMaintenancePermission.value) {
    // 维修人员必须上传维修相册
    const maintainAlbum = detailData.value.cMaintainAlbumList || [];
    if (!maintainAlbum.length) {
      ElMessage.error('维修相册为必填项，请上传维修相册');
      return;
    }
    // 维修人员点击确认时的状态处理
    if (detailData.value.status === 0) {
      // 待维修 -> 待审核
      detailData.value.status = 2;
      detailData.value.maintenanceTime = getLocalDateTimeString();
    } else if (detailData.value.status === 3) {
      // 不通过 -> 待审核（重新提交维修）
      detailData.value.status = 2;
      detailData.value.maintenanceTime = getLocalDateTimeString();
    } else if (detailData.value.status === 4) {
      // 已接取 -> 待审核（完成维修）
      detailData.value.status = 2;
      detailData.value.maintenanceTime = getLocalDateTimeString();
    }
  }
  const inspecAlbumList = (detailData.value.inspecpictures || []).map(url => ({ picture: url }));
  const maintainAlbumList = (detailData.value.maintainpictures || []).map(url => ({ picture: url }));
  if (isAddMode.value) {
    const payload = {
      ...detailData.value,
      cInspecAlbumList: inspecAlbumList,
      cMaintainAlbumList: maintainAlbumList,
      detectionBy: currentUser.userId,
      detectionTime: getLocalDateTimeString(),
      regionId: regionInfo.id,
      picture: detailData.value.picture // 确保主图字段有值
    };
    const res = await addInformation(payload);
    if (res.code === 200) {
      ElMessage.success('新增成功');
      resetDetailDialog();
      loadInfoList();
      // 更新区域状态
      await updateRegionStatus();
    } else {
      ElMessage.error(res.msg || '新增失败');
    }
    return;
  }
  
  // 构建当前相册列表用于比较
  const currentInspecAlbumList = (detailData.value.cInspecAlbumList || []).map(item => ({ picture: item.url || item.picture || '' }));
  const currentMaintainAlbumList = (detailData.value.cMaintainAlbumList || []).map(item => ({ picture: item.url || item.picture || '' }));
  
  // 获取原始相册列表用于比较
  const originalInspecAlbumList = (originalDetailData.value?.cInspecAlbumList || []).map(item => ({ picture: item.url || item.picture || '' }));
  const originalMaintainAlbumList = (originalDetailData.value?.cMaintainAlbumList || []).map(item => ({ picture: item.url || item.picture || '' }));
  
  const payload = {
    id: detailData.value.id,
    remarks: detailData.value.remarks !== (originalDetailData.value?.remarks ?? null) ? detailData.value.remarks : null,
    cInspecAlbumList: JSON.stringify(currentInspecAlbumList) !== JSON.stringify(originalInspecAlbumList) ? currentInspecAlbumList : null,
    cMaintainAlbumList: JSON.stringify(currentMaintainAlbumList) !== JSON.stringify(originalMaintainAlbumList) ? currentMaintainAlbumList : null,
    detectionBy: detailData.value.detectionBy !== (originalDetailData.value?.detectionBy ?? null) ? detailData.value.detectionBy : null,
    detectionTime: detailData.value.detectionTime !== (originalDetailData.value?.detectionTime ?? null) ? detailData.value.detectionTime : null,
    maintenanceBy: detailData.value.maintenanceBy !== (originalDetailData.value?.maintenanceBy ?? null) ? detailData.value.maintenanceBy : null,
    maintenanceTime: detailData.value.maintenanceTime !== (originalDetailData.value?.maintenanceTime ?? null) ? detailData.value.maintenanceTime : null,
    status: detailData.value.status,
  }
  const hasUpdate = Object.keys(payload).some(key => key !== 'id' && payload[key] !== null)
  if (!hasUpdate) {
    ElMessage.info('没有修改内容，无需提交')
    return
  }
  const res = await updateInformation(payload)
  if (res.code === 200) {
    ElMessage.success('修改成功')
    resetDetailDialog();
    loadInfoList()
    // 更新区域状态
    await updateRegionStatus();
  } else {
    ElMessage.error(res.msg || '修改失败')
  }
}

const detectionEditVisible = ref(false)
const maintenanceEditVisible = ref(false)
const detectionEditForm = ref({})
const maintenanceEditForm = ref({})

// 当前用户信息
const currentUser = reactive({
  userId: null,
  username: "",
  realName: "",
  roleId: null,
  roleName: "",
  roleKey: "",
  avatar: "",
})

// 获取用户授权角色
const loadUserRoles = async (userId) => {
  if (!userId) return;

  try {
    const response = await getAuthRole(userId);
    if (response.code === 200 && response.user.roles && response.user.roles.length > 0) {
      currentUser.roleId = response.user.roles[0].roleId;
      currentUser.roleName = response.user.roles[0].roleName || "未知角色";
      currentUser.roleKey = response.user.roles[0].roleKey || "";
    }
  } catch (error) {
    console.error("获取用户角色失败:", error);
    currentUser.roleName = "未知角色";
    currentUser.roleKey = "";
  }
};

// 获取当前用户权限
const getUserPermission = async () => {
  try {
    // 首先尝试从API获取用户个人信息
    try {
      const profileResponse = await getUserProfile();
      
      if (profileResponse.code === 200 && profileResponse.data) {
        const profileData = profileResponse.data;
        Object.assign(currentUser, {
          userId: profileData.userId,
          username: profileData.userName || profileData.username || "",
          realName: profileData.realName || profileData.nickName || profileData.nickname || profileData.userName || "",
          avatar: profileData.avatar || profileData.avatarUrl || "",
        });

        // 获取用户角色信息
        if (currentUser.userId) {
          await loadUserRoles(currentUser.userId);
        }

        return currentUser.roleKey || null;
      }
    } catch (apiError) {
      console.warn("API获取用户信息失败，使用本地存储:", apiError);
    }

    // 如果API获取失败，回退到localStorage
    const userInfo = getUserInfo()
    if (userInfo && (userInfo.roleKey || userInfo.roleName)) {
      Object.assign(currentUser, {
        userId: userInfo.userId,
        username: userInfo.userName || userInfo.username || "",
        realName: userInfo.realName || userInfo.nickName || userInfo.nickname || userInfo.userName || "",
        roleId: userInfo.roleId || userInfo.role_id || null,
        roleName: userInfo.roleName,
        roleKey: userInfo.roleKey || "",
        avatar: userInfo.avatar || userInfo.avatarUrl || "",
      });
      return userInfo.roleKey || userInfo.roleName?.toLowerCase() || null
    }
    return null
  } catch (error) {
    console.error('获取用户权限失败:', error)
    return null
  }
}

// 检查是否有检测权限
const hasDetectionPermission = ref(false)

// 检查是否有维修权限
const hasMaintenancePermission = ref(false)

// 更新权限状态
const updatePermissions = async () => {
  const permission = await getUserPermission()
  
  hasDetectionPermission.value = permission === 'inspec' || permission === 'inspect' || permission === '巡检' || permission === '巡检人员'
  hasMaintenancePermission.value = permission === 'maintain' || permission === 'maintenance' || permission === '维修' || permission === '维修人员'
}

function openDetectionEdit() {
  if (isReadonly.value) return;
  if (!hasDetectionPermission.value) return;
  // 优先用inspecpictures，没有则兼容cInspecAlbumList
  let inspecArr = []
  if (Array.isArray(detailData.value?.inspecpictures) && detailData.value.inspecpictures.length > 0) {
    inspecArr = [...detailData.value.inspecpictures]
  } else if (Array.isArray(detailData.value?.cInspecAlbumList) && detailData.value.cInspecAlbumList.length > 0) {
    inspecArr = detailData.value.cInspecAlbumList.map(i => i.url || i.picture || '').filter(Boolean)
  }
  detectionEditForm.value = {
    detectionUser: currentUser.realName || currentUser.nickName || currentUser.username || '',
    detectionBy: currentUser.userId || '',
    inspecpictures: inspecArr
  }
  detectionEditVisible.value = true
}
function openMaintenanceEdit() {
  if (isReadonly.value) return;
  if (!hasMaintenancePermission.value) return;
  // 优先用maintainpictures，没有则兼容cMaintainAlbumList
  let maintainArr = []
  if (Array.isArray(detailData.value?.maintainpictures) && detailData.value.maintainpictures.length > 0) {
    maintainArr = [...detailData.value.maintainpictures]
  } else if (Array.isArray(detailData.value?.cMaintainAlbumList) && detailData.value.cMaintainAlbumList.length > 0) {
    maintainArr = detailData.value.cMaintainAlbumList.map(i => i.url || i.picture || '').filter(Boolean)
  }
  maintenanceEditForm.value = {
    maintenanceUser: currentUser.realName || currentUser.nickName || currentUser.username || '',
    maintenanceBy: currentUser.userId || '',
    maintainpictures: maintainArr
  }
  maintenanceEditVisible.value = true
}
function handleAlbumUploadSuccess(response, file, type) {
  if (response.code === 200 && (response.url || response.data?.url)) {
    const url = response.url || response.data.url
    if (type === 'detection') {
      if (!detectionEditForm.value.inspecpictures) detectionEditForm.value.inspecpictures = []
      detectionEditForm.value.inspecpictures.push(url)
    } else if (type === 'maintenance') {
      if (!maintenanceEditForm.value.maintainpictures) maintenanceEditForm.value.maintainpictures = []
      maintenanceEditForm.value.maintainpictures.push(url)
    }
    ElMessage.success('图片上传成功')
  } else {
    ElMessage.error(response.msg || '图片上传失败')
  }
}
function handleAlbumRemove(file, fileList, type) {
  if (type === 'detection') {
    detectionEditForm.value.inspecpictures = fileList.map(f => f.url)
  } else if (type === 'maintenance') {
    maintenanceEditForm.value.maintainpictures = fileList.map(f => f.url)
  }
}
function getLocalDateTimeString() {
  const now = new Date();
  const pad = n => n < 10 ? '0' + n : n;
  return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
}
async function handleDetectionEditConfirm() {
  // 只有巡检权限才能编辑检测相册
  if (!hasDetectionPermission.value) {
    ElMessage.error('您没有权限编辑检测相册');
    detectionEditVisible.value = false;
    return;
  }
  detailData.value.detectionBy = detectionEditForm.value.detectionBy
  detailData.value.inspecpictures = detectionEditForm.value.inspecpictures || []
  // 同步更新详情页相册对象数组
  detailData.value.cInspecAlbumList = (detectionEditForm.value.inspecpictures || []).map(url => ({ url }))
  // 更新检测人员信息显示
  detailDetectionUser.value = {
    nickName: detectionEditForm.value.detectionUser,
    userId: detectionEditForm.value.detectionBy
  }
  // 巡检时间
  detailData.value.detectionTime = getLocalDateTimeString();
  detectionEditVisible.value = false
  
  // 移除立即更新数据库的逻辑，改为在详情页面确定时统一更新
  console.log('检测相册编辑完成，等待详情页面确认后统一保存');
}
async function handleMaintenanceEditConfirm() {
  // 只有维修权限才能编辑维修相册
  if (!hasMaintenancePermission.value) {
    ElMessage.error('您没有权限编辑维修相册');
    maintenanceEditVisible.value = false;
    return;
  }
  detailData.value.maintenanceBy = maintenanceEditForm.value.maintenanceBy
  detailData.value.maintainpictures = maintenanceEditForm.value.maintainpictures || []
  // 同步更新详情页相册对象数组
  detailData.value.cMaintainAlbumList = (maintenanceEditForm.value.maintainpictures || []).map(url => ({ url }))
  // 更新维修人员信息显示
  detailMaintenanceUser.value = {
    nickName: maintenanceEditForm.value.maintenanceUser,
    userId: maintenanceEditForm.value.maintenanceBy
  }
  // 每次编辑都更新时间
  detailData.value.maintenanceTime = getLocalDateTimeString();
  maintenanceEditVisible.value = false
  
  // 移除立即更新数据库的逻辑，改为在详情页面确定时统一更新
  console.log('维修相册编辑完成，等待详情页面确认后统一保存');
}

// 新增：顶部区域名点击新增
function handleRegionNameClick() {
  if (!hasDetectionPermission.value) return;
  // 重置主图相关状态
  isPictureDeleted.value = false;
  showDeleteIcon.value = false;
  newPictureUrl.value = '';
  uploadFileList.value = [];
  detailData.value = {
    regionId: regionInfo.id,
    remarks: '',
    inspecpictures: [],
    maintainpictures: [],
    cInspecAlbumList: [],
    cMaintainAlbumList: [],
    detectionBy: currentUser.userId,
    detectionTime: '',
    maintenanceBy: '',
    maintenanceTime: '',
    status: 0,
    picture: ''
  };
  originalDetailData.value = null;
  detailDetectionUser.value = { nickName: currentUser.realName || currentUser.nickName || currentUser.username || '', userId: currentUser.userId };
  detailMaintenanceUser.value = null;
  isAddMode.value = true;
  detailDialogVisible.value = true;
}

// 初始化用户信息
const initUserInfo = async () => {
  await updatePermissions()
}

// 相册展开/收起状态
const inspecAlbumExpanded = ref(false)
const maintainAlbumExpanded = ref(false)

onMounted(() => {
  initUserInfo().then(() => {
    // 权限初始化完成后再加载区域信息
  const regionId = route.params.id
  if (regionId) {
    loadRegionInfo(regionId)
  } else {
    ElMessage.error('区域ID不能为空')
    router.push('/')
  }
  })
})

function resetDetailDialog() {
  detailDialogVisible.value = false;
  isAddMode.value = false;
  detailData.value = null;
  originalDetailData.value = null;
  detailDetectionUser.value = null;
  detailMaintenanceUser.value = null;
  // 其他需要重置的状态
}

// 新增：只读状态判断
const isReadonly = computed(() => {
  if (!detailData.value) return false;
  
  // 已维修的信息对所有人只读
  if (detailData.value.status === 1) return true;
  
  // 维修人员可以修改不通过的维修信息
  if (hasMaintenancePermission.value && detailData.value.status === 3) return false;
  
  // 维修人员可以修改已接取的维修信息
  if (hasMaintenancePermission.value && detailData.value.status === 4) return false;
  
  // 其他情况按原逻辑处理
  return false;
});

// 更新区域状态函数
const updateRegionStatus = async () => {
  if (!regionInfo.id) return;
  
  try {
    // 获取该区域的所有信息
    const query = { 
      pageNum: 1, 
      pageSize: 9999,
      regionId: regionInfo.id 
    };
    const res = await listInformation(query);
    
    if (res.code === 200 && Array.isArray(res.rows)) {
      const allInfo = res.rows;
      
      // 统计各种状态的数量
      const count0 = allInfo.filter(i => i.status === 0).length; // 待维修
      const count3 = allInfo.filter(i => i.status === 3).length; // 不通过
      const count2 = allInfo.filter(i => i.status === 2).length; // 待审核
      const count1 = allInfo.filter(i => i.status === 1).length; // 已维修
      
      let newRegionStatus = 0; // 默认安全
      
      // 判断逻辑：
      // 1. 若存在待维修或不通过，将区域状态改为待维修(2)
      if (count0 > 0 || count3 > 0) {
        newRegionStatus = 2;
      }
      // 2. 不存在待维修或不通过，再判断有没有待审核，若存在待审核，将区域状态改为未检查(1)
      else if (count2 > 0) {
        newRegionStatus = 1;
      }
      // 3. 若前二种情况都没有，所有信息都为已维修，则将状态信息改为安全(0)
      else if (count1 > 0 && count0 === 0 && count3 === 0 && count2 === 0) {
        newRegionStatus = 0;
      }
      
      // 只有当状态发生变化时才更新
      if (newRegionStatus !== getRegionStatus(regionInfo)) {
        const updateRes = await updateRegion({
          id: regionInfo.id,
          regionStatus: newRegionStatus
        });
        
        if (updateRes.code === 200) {
          // 更新本地区域信息
          regionInfo.regionStatus = newRegionStatus;
          regionInfo.status = newRegionStatus;
          console.log(`区域状态已更新为: ${newRegionStatus}`);
        } else {
          console.error('更新区域状态失败:', updateRes.msg);
        }
      }
    }
  } catch (error) {
    console.error('更新区域状态时发生错误:', error);
  }
};
</script>

<style lang="scss" scoped>
.region-safety-page {
  min-height: 100vh;
  padding-bottom: 20px;
  transition: all 0.3s ease;
  position: relative;
  
  // 玻璃拟态背景遮罩
  &::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: -1;
  }
  
  &.dark-mode {
    background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
    
    .region-header {
      background: linear-gradient(135deg, #2d2d44 0%, #3d3d5a 100%);
      border-bottom: 1px solid #4a4a6a;
      
      .region-info {
        .region-name {
          color: #e8e8f0 !important;
          flex: 1;
        }
        
        .region-status {
          margin-left: 20px;
          white-space: nowrap;
          
          &.safe {
            background: rgba(74, 222, 128, 0.2);
            color: #4ade80 !important;
            border-color: #4ade80;
          }
          
          &.unchecked {
            background: rgba(251, 191, 36, 0.2);
            color: #fbbf24 !important;
            border-color: #fbbf24;
          }
          
          &.maintenance {
            background: rgba(248, 113, 113, 0.2);
            color: #f87171 !important;
            border-color: #f87171;
          }
        }
      }
      
      .back-button {
        background: rgba(255, 255, 255, 0.1);
        
        &:hover {
          background: rgba(255, 255, 255, 0.2);
        }
      }
    }
    
    .content-section {
      background: linear-gradient(135deg, #2d2d44 0%, #3d3d5a 100%);
      border: 1px solid #4a4a6a;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      
      .section-header {
        .section-title {
          color: #e8e8f0 !important;
        }
      }
      
      .info-list {
        .info-item {
          border-bottom-color: #4a4a6a;
          
          &:hover {
            background: linear-gradient(135deg, #3d3d5a 0%, #4d4d6a 100%);
          }
          
          .info-content {
            .info-title {
              color: #e8e8f0 !important;
            }
            
            .info-desc {
              color: #a0a0b8 !important;
            }
            
            .info-time {
              color: #8080a0 !important;
            }
          }
          
          .info-status {
            &.completed {
              color: #4ade80 !important;
            }
            
            &.pending {
              color: #fbbf24 !important;
            }
          }
        }
        
        .empty-state {
          .el-icon {
            color: #8080a0;
          }
          
          .empty-text {
            color: #a0a0b8 !important;
          }
          
          .empty-desc {
            color: #8080a0 !important;
          }
        }
      }
    }
  }
  
  // 操作按钮区域样式
  .action-buttons-section {
    padding: 20px;
    
    .action-buttons-container {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
    }
  }
  
  // 玻璃拟态按钮样式
  .glass-button {
    padding: 12px 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    color: #ffffff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    
    .button-text {
      display: block;
      color: #ffffff;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    }
    
    &:hover {
      background: rgba(0, 0, 0, 0.6);
      transform: translateY(-2px);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
      color: #ffffff;
      
      .button-text {
        color: #ffffff;
      }
    }
    
    &:active {
      transform: translateY(0);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }
    
    &.glass-button-primary {
      border-color: rgba(74, 144, 226, 0.6);
      background: rgba(74, 144, 226, 0.3);
      
      &:hover {
        background: rgba(74, 144, 226, 0.5);
        color: #ffffff;
        
        .button-text {
          color: #ffffff;
        }
      }
    }
    
    &.glass-button-success {
      border-color: rgba(82, 196, 26, 0.6);
      background: rgba(82, 196, 26, 0.3);
      
      &:hover {
        background: rgba(82, 196, 26, 0.5);
        color: #ffffff;
        
        .button-text {
          color: #ffffff;
        }
      }
    }
    
    &.glass-button-secondary {
      border-color: rgba(140, 140, 140, 0.6);
      background: rgba(140, 140, 140, 0.3);
      
      &:hover {
        background: rgba(140, 140, 140, 0.5);
        color: #ffffff;
        
        .button-text {
          color: #ffffff;
        }
      }
    }
  }

  .region-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    margin: 16px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    
    .back-button {
      background: rgba(255, 255, 255, 0.2);
      color: rgba(255, 255, 255, 0.9);
      border-radius: 12px;
      padding: 8px 16px;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.2);
      
      &:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-1px);
      }
      
      .el-icon {
        font-size: 16px;
      }
    }
    
    .region-name {
      font-size: 1.5rem;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.95);
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      flex: 1;
      text-align: center;
      margin: 0 20px;
    }
  }
  
  .content-section {
    transition: box-shadow 0.3s, border 0.3s;
    margin: 20px;
    /* 新拟物化凸起效果（参考图片风格） */
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 6px 6px 12px rgba(163, 177, 198, 0.6),
                -6px -6px 12px rgba(255, 255, 255, 0.9);
    border: none;
    
    .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      
      .section-title {
        font-size: 18px;
        font-weight: 600;
        color: #303133;
        margin: 0;
      }
    }
    
    .info-list {
      .info-item {
        display: flex;
        align-items: center;
        padding: 16px;
        border-bottom: 1px solid #f0f0f0;
        transition: all 0.3s ease;
        
        &:last-child {
          border-bottom: none;
        }
        
        &:hover {
          background: #f8f9fa;
        }
        
        .info-icon {
          width: 40px;
          height: 40px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16px;
          
          &.warning {
            background: rgba(230, 162, 60, 0.1);
            color: #e6a23c;
          }
          
          &.success {
            background: rgba(103, 194, 58, 0.1);
            color: #67c23a;
          }
          
          &.primary {
            background: rgba(64, 158, 255, 0.1);
            color: #409eff;
          }
          
          .el-icon {
            font-size: 20px;
          }
        }
        
        .info-content {
          flex: 1;
          
          .info-title {
            font-size: 16px;
            font-weight: 500;
            color: #303133;
            margin-bottom: 4px;
          }
          
          .info-desc {
            font-size: 14px;
            color: #606266;
            margin-bottom: 4px;
            line-height: 1.4;
          }
          
          .info-time {
            font-size: 12px;
            color: #909399;
          }
        }
        
        .info-status {
          font-size: 14px;
          font-weight: 500;
          padding: 6px 12px;
          border-radius: 6px;
          
          &.completed {
            background: rgba(103, 194, 58, 0.1);
            color: #67c23a;
          }
          
          &.pending {
            background: rgba(230, 162, 60, 0.1);
            color: #e6a23c;
          }
        }
      }
      
      .empty-state {
        text-align: center;
        padding: 60px 20px;
        
        .el-icon {
          font-size: 48px;
          color: #c0c4cc;
          margin-bottom: 16px;
        }
        
        .empty-text {
          font-size: 16px;
          color: #606266;
          margin-bottom: 8px;
        }
        
        .empty-desc {
          font-size: 14px;
          color: #909399;
        }
      }
    }
  }
  
  .info-card-section {
    margin: 16px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    
    .info-card-list {
      min-height: 180px;
      
      .info-empty {
        text-align: center;
        color: #bfbfbf;
        
        .el-icon {
          font-size: 48px;
          margin-bottom: 12px;
        }
        
        .empty-text {
          font-size: 18px;
          font-weight: 600;
          margin-bottom: 6px;
        }
        
        .empty-desc {
          font-size: 16px;
          color: #bfbfbf;
        }
      }
      
      .info-card-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 32px;
        margin-top: 8px;
      }
    }
  }
  
  .info-card {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    padding: 16px 10px 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
    min-width: 0;
    max-width: 340px;
    width: 100%;
    cursor: pointer;
    
    &:hover {
      background: rgba(255, 255, 255, 0.4);
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    }
    
    &:active {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }
    .info-card-id-badge {
      position: absolute;
      left: 0;
      top: 0;
      transform: translate(-18%,-38%);
      color: #fff;
      font-size: 1.15rem;
      font-weight: 700;
      letter-spacing: 1.5px;
      padding: 7px 18px 7px 18px;
      border-radius: 16px 0 18px 0;
      box-shadow: 0 2px 12px 0 rgba(96,165,250,0.18);
      z-index: 2;
      border: 2.5px solid #fff;
      text-shadow: 0 2px 8px rgba(96,165,250,0.18), 0 1px 0 #3332;
      transition: background 0.3s;
      user-select: none;
      pointer-events: none;
      background: linear-gradient(90deg, #60a5fa 0%, #818cf8 100%); /* 默认蓝色 */
    }
    .badge-status-0 { /* 待维修-玫红 */
      background: linear-gradient(90deg, #ff5f8f 0%, #ff3c6f 100%) !important;
      box-shadow: 0 2px 12px 0 rgba(255,95,143,0.18);
    }
    .badge-status-1 { /* 已维修-蓝色，保持原样 */
      background: linear-gradient(90deg, #60a5fa 0%, #818cf8 100%) !important;
      box-shadow: 0 2px 12px 0 rgba(96,165,250,0.18);
    }
    .badge-status-2 { /* 待审核-黄色 */
      background: linear-gradient(90deg, #ffe066 0%, #ffd700 100%) !important;
      color: #7c5a00 !important;
      box-shadow: 0 2px 12px 0 rgba(255,224,102,0.18);
      text-shadow: 0 2px 8px rgba(255,224,102,0.18), 0 1px 0 #3332;
    }
    .badge-status-3 { /* 不通过-灰色 */
      background: linear-gradient(90deg, #bdbdbd 0%, #757575 100%) !important;
      color: #fff !important;
      box-shadow: 0 2px 12px 0 rgba(189,189,189,0.18);
      text-shadow: 0 2px 8px rgba(189,189,189,0.18), 0 1px 0 #3332;
    }
    .info-card-img {
      width: 92%;
      height: 120px;
      border-radius: 10px;
      background: #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      margin-bottom: 14px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
      }
      .info-card-status-overlay {
        position: absolute;
        left: 50%;
        bottom: 8px;
        transform: translateX(-50%);
        min-width: 60px;
        max-width: calc(100% - 16px);
        padding: 6px 12px;
        font-size: 13px;
        font-weight: 600;
        border-radius: 12px;
        z-index: 10;
        pointer-events: none;
        user-select: none;
        text-align: center;
        
        // 玻璃拟态基础样式 - 增强对比度
        background: rgba(0, 0, 0, 0.6) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
        color: #ffffff !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
      }
      
      // 不同状态的颜色主题 - 更明显的颜色区分
      .info-card-status-overlay {
        &[style*="color: #ff4d4f"] {
          // 待维修 - 红色主题
          background: rgba(220, 38, 127, 0.85) !important;
          border-color: rgba(255, 77, 79, 0.6);
          color: #ffffff !important;
          text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
        }
        
        &[style*="color: #52c41a"] {
          // 已维修 - 绿色主题
          background: rgba(34, 139, 34, 0.85) !important;
          border-color: rgba(82, 196, 26, 0.6);
          color: #ffffff !important;
          text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
        }
        
        &[style*="color: #faad14"] {
          // 待审核 - 橙色主题
          background: rgba(255, 140, 0, 0.85) !important;
          border-color: rgba(250, 173, 20, 0.6);
          color: #ffffff !important;
          text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
        }
        
        &[style*="color: #8c8c8c"] {
          // 不通过 - 深灰色主题
          background: rgba(105, 105, 105, 0.85) !important;
          border-color: rgba(140, 140, 140, 0.6);
          color: #ffffff !important;
          text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
        }
        
        &[style*="color: #1890ff"] {
          // 已接取 - 蓝色主题
          background: rgba(24, 144, 255, 0.85) !important;
          border-color: rgba(24, 144, 255, 0.6);
          color: #ffffff !important;
          text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
        }
      }
      &.info-card-img-placeholder {
        background: #f5f5f5;
        color: #bfbfbf;
        .el-icon {
          font-size: 36px;
        }
      }
    }
    .info-card-meta {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .info-card-status {
        font-size: 13px;
        font-weight: 500;
        border-radius: 8px;
        padding: 4px 12px;
        margin-left: 8px;
        transition: background 0.2s, color 0.2s;
      }
    }
  }
  .info-pagination {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .region-safety-page {
    .region-header {
      padding: 16px;
      
      .region-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-left: 0;
        margin-top: 40px; // 为返回按钮留出空间
        
        .region-name {
          font-size: 18px;
        }
      }
      
      .back-button {
        top: 16px;
        left: 16px;
        padding: 6px 12px;
        font-size: 12px;
        
        .el-icon {
          font-size: 14px;
        }
      }
    }
    
    .content-section {
      margin: 12px;
      padding: 16px;
      
      .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
      }
      
      .info-list {
        .info-item {
          flex-direction: column;
          align-items: flex-start;
          gap: 12px;
          
          .info-icon {
            margin-right: 0;
          }
          
          .info-status {
            align-self: flex-end;
          }
        }
      }
    }
  }
}

.info-detail-dialog {
  .el-dialog__body {
    padding: 24px 32px 24px 32px;
    background: #f8fafc;
    border-radius: 18px;
  }
  .info-detail-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: #222;
    margin: 0 auto 8px auto;
    background: linear-gradient(90deg, #60a5fa 0%, #818cf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-shadow: 0 2px 12px #60a5fa22;
  }
}
.info-detail-content {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 8px;
  padding-bottom: 8px;
  .info-detail-main-img-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 8px;
    .info-detail-main-img-interactive {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      min-height: 120px;
    }
    .info-detail-main-img-delete {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 2.6rem;
      color: #ff4d4f;
      /* 玻璃拟态效果（参考案例图片） */
      background: rgba(255, 255, 255, 0.4);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      border: 1px solid rgba(255, 255, 255, 0.6);
      border-radius: 50%;
      box-shadow: 0 2px 8px rgba(197, 217, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.7);
      cursor: pointer;
      z-index: 20;
      padding: 10px;
      border: 2px solid #fff;
      transition: background 0.2s, color 0.2s;
      opacity: 0.95;
      &:hover {
        background: #ff4d4f;
        color: #fff;
      }
    }
    .info-detail-main-img-upload {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      z-index: 10;
      .info-detail-main-img-plus {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #60a5fa;
        font-size: 2.2rem;
        background: #f5f7fa;
        border-radius: 12px;
        padding: 18px 24px;
        box-shadow: 0 2px 8px 0 rgba(96,165,250,0.08);
        border: 2px dashed #b3d8fd;
        cursor: pointer;
        transition: border 0.2s, background 0.2s;
        &:hover {
          border: 2px solid #60a5fa;
          background: #e6f7ff;
        }
        .el-icon {
          font-size: 2.2rem;
          margin-bottom: 4px;
        }
        span {
          font-size: 1rem;
          color: #60a5fa;
          font-weight: 600;
        }
      }
    }
    .info-detail-main-img-el {
      width: 220px !important;
      height: 120px !important;
      min-width: 220px !important;
      min-height: 120px !important;
      max-width: 220px !important;
      max-height: 120px !important;
      border-radius: 14px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.10);
      object-fit: contain;
      background: #f0f0f0;
      border: 2px solid #fff;
      transition: box-shadow 0.2s, border 0.2s;
      cursor: pointer;
      display: block;
      overflow: hidden;
      position: relative;
      // 强制内部img
      :deep(img) {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        border-radius: 14px;
        display: block;
      }
    }
    .info-detail-status-badge-float {
      @extend .info-card-id-badge;
      position: absolute;
      right: 0;
      top: 0;
      transform: translate(30%,-50%);
      font-size: 1.08rem;
      padding: 7px 22px;
      border-radius: 16px;
      min-width: 60px;
      box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
      margin-left: 0;
      margin-right: 0;
      z-index: 2;
    }
    .badge-status-0.info-detail-status-badge-float {
      background: linear-gradient(90deg, #ff5f8f 0%, #ff3c6f 100%) !important;
      box-shadow: 0 2px 12px 0 rgba(255,95,143,0.18);
    }
    .badge-status-1.info-detail-status-badge-float {
      background: linear-gradient(90deg, #60a5fa 0%, #818cf8 100%) !important;
      box-shadow: 0 2px 12px 0 rgba(96,165,250,0.18);
    }
    .badge-status-2.info-detail-status-badge-float {
      background: linear-gradient(90deg, #ffe066 0%, #ffd700 100%) !important;
      color: #7c5a00 !important;
      box-shadow: 0 2px 12px 0 rgba(255,224,102,0.18);
      text-shadow: 0 2px 8px rgba(255,224,102,0.18), 0 1px 0 #3332;
    }
    .badge-status-3.info-detail-status-badge-float {
      background: linear-gradient(90deg, #bdbdbd 0%, #757575 100%) !important;
      color: #fff !important;
      box-shadow: 0 2px 12px 0 rgba(189,189,189,0.18);
      text-shadow: 0 2px 8px rgba(189,189,189,0.18), 0 1px 0 #3332;
    }
  }
  .info-detail-section {
    /* 新拟物化凸起效果（参考图片风格） */
    background: #ffffff;
    border-radius: 13px;
    box-shadow: 4px 4px 8px rgba(163, 177, 198, 0.5),
                -4px -4px 8px rgba(255, 255, 255, 0.9);
    border: none;
    padding: 14px 14px 10px 18px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-left: 4px solid rgba(64, 158, 255, 0.3);
    .info-detail-section-title {
      font-size: 1.05rem;
      font-weight: 700;
      color: #60a5fa;
      margin-bottom: 6px;
      letter-spacing: 1px;
    }
  }
  .info-detail-status-row {
    display: flex;
    align-items: center;
    gap: 12px;
    .info-detail-status-label {
      font-size: 15px;
      color: #888;
      font-weight: 500;
    }
  }
  .info-detail-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    .info-detail-label {
      color: #888;
      font-weight: 500;
      min-width: 70px;
    }
    .info-detail-value {
      color: #222;
      font-weight: 600;
      min-width: 40px;
    }
  }
  .info-detail-album-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    .info-detail-label {
      color: #888;
      font-weight: 500;
      min-width: 70px;
      margin-top: 4px;
    }
    .info-detail-album-list {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      .info-detail-album-img {
        width: 70px !important;
        height: 70px !important;
        min-width: 70px !important;
        min-height: 70px !important;
        max-width: 70px !important;
        max-height: 70px !important;
        border-radius: 8px;
        object-fit: contain;
        background: #f0f0f0;
        cursor: pointer;
        transition: box-shadow 0.2s;
        display: block;
        overflow: hidden;
        :deep(img) {
          width: 100% !important;
          height: 100% !important;
          object-fit: contain !important;
          border-radius: 8px;
          display: block;
        }
      }
    }
  }
  .info-detail-remarks-content {
    flex: 1;
    .info-detail-remarks-input {
      :deep(.el-textarea__inner) {
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        background: #fafafa;
        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 1.5;
        resize: vertical;
        color: #2c3e50 !important;
        font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.1);
        &:focus {
          border-color: rgba(197, 217, 255, 0.6);
          background: rgba(255, 255, 255, 0.5);
          box-shadow: 0 0 0 2px rgba(197, 217, 255, 0.3);
        }
      }
      :deep(.el-input__count) {
        color: #999;
        font-size: 12px;
      }
    }
    .info-detail-remarks-text {
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      border: 1px solid #e9ecef;
      border-radius: 8px;
      padding: 12px;
      min-height: 60px;
      font-size: 15px !important;
      font-weight: 500 !important;
      line-height: 1.6;
      color: #2c3e50 !important;
      white-space: pre-wrap;
      word-break: break-word;
      letter-spacing: 0.3px;
      font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif !important;
      text-shadow: 0 1px 2px rgba(0,0,0,0.1);
      position: relative;
      overflow: hidden;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, #60a5fa 0%, #818cf8 50%, #60a5fa 100%);
        opacity: 0.7;
      }
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, #60a5fa 50%, transparent 100%);
        opacity: 0.3;
      }
    }
  }
}
.info-detail-empty {
  text-align: center;
  color: #bbb;
  font-size: 16px;
  padding: 40px 0;
}
.info-detail-confirm-bar {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}

// 编辑弹窗响应式样式
.edit-dialog {
  :deep(.el-dialog) {
    max-width: 90vw;
    margin: 5vh auto;
    
    @media (max-width: 768px) {
      width: 95% !important;
      max-width: 95vw;
      margin: 2vh auto;
    }
    
    @media (max-width: 480px) {
      width: 98% !important;
      max-width: 98vw;
      margin: 1vh auto;
    }
  }
  
  :deep(.el-dialog__header) {
    padding: 16px 20px;
    
    @media (max-width: 768px) {
      padding: 12px 16px;
    }
    
    @media (max-width: 480px) {
      padding: 10px 12px;
    }
  }
  
  :deep(.el-dialog__body) {
    padding: 20px;
    
    @media (max-width: 768px) {
      padding: 16px;
    }
    
    @media (max-width: 480px) {
      padding: 12px;
    }
  }
  
  :deep(.el-dialog__footer) {
    padding: 16px 20px;
    
    @media (max-width: 768px) {
      padding: 12px 16px;
    }
    
    @media (max-width: 480px) {
      padding: 10px 12px;
    }
  }
  
  :deep(.el-form-item__label) {
    @media (max-width: 480px) {
      font-size: 14px;
    }
  }
  
  :deep(.el-input__inner) {
    @media (max-width: 480px) {
      font-size: 14px;
    }
  }
}

.album-expand-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 2px 8px 0 rgba(96,165,250,0.10);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  background: transparent;
  &:hover {
    background: rgba(96,165,250,0.12);
    box-shadow: 0 4px 16px 0 rgba(96,165,250,0.18);
    transform: scale(1.12) rotate(0deg);
  }
}
.album-expand-arrow.expanded {
  transform: rotate(180deg);
}
</style> 